.Index {
  width           : 100vw;
  height          : 100vh;
  background-color: #0B1445;
  display         : flex;
  align-items     : center;
  justify-content : center;

  .login {
    width           : 40vw;
    height          : 40vh;
    min-width       : 400px;
    min-height      : 300px;
    background-color: #09074B;
    text-align      : center;
    border-radius   : 15px;

    .title {
      color      : yellow;
      font-size  : 28px;
      font-weight: bold;
      position   : relative;
      top        : -100px;
    }

    .user {
      .user-login {
        color         : aliceblue;
        font-size     : 16px;
        letter-spacing: 15px;
        margin-bottom : 20px;
      }
    }
  }
}

.content {
  width          : 100vw;
  height         : 100vh;
  box-sizing     : border-box;
  background     : url('./img/imgCenterBig.jpg') no-repeat;
  background-size: 100% 100%;

  .imgheader {
    margin-bottom: 5px;

    img {
      width: 100%;
    }
  }

  .home-top {
    display        : flex;
    width          : 100%;
    height         : 12%;
    padding        : 5px 0;
    justify-content: space-between;

    .box {
      margin       : 0 4px;
      width        : 13vw;
      height       : 75px;
      overflow     : hidden;
      white-space  : nowrap;
      border-radius: 4%;
      display      : flex;

      .left {
        padding       : 5px;
        flex          : 1.2;
        box-sizing    : border-box;
        display       : flex;
        flex-direction: column;

        .left-1 {
          text-align: center;

          img {
            width        : 33px;
            height       : 37px;
            margin-bottom: 10px;
          }
        }

        .left-2 {
          text-align: center;
          font-size : 12px;
        }
      }

      .right {
        display        : flex;
        flex-direction : column;
        justify-content: center;
        padding-right  : 5px;

        .right-1 {
          color    : aliceblue;
          font-size: 12px;
        }

        .right-2 {
          font-size: 20px
        }
      }
    }
  }

  .echarts1 {
    background     : url('./img/222222222222222222222.png') no-repeat;
    background-size: 100% 100%;
    height         : 54vh;
    padding        : 10px 15px;
    box-sizing     : border-box;
    display        : flex;

    .box1 {
      flex    : 1;
      position: relative;

      .btn {
        position: absolute;
        top     : 45%;
        left    : 10px;
        z-index : 10;
      }
    }

    .box2 {
      flex          : 1;
      display       : flex;
      flex-direction: column;
      position      : relative;
    }

    .box3 {
      flex           : 1.5;
      background     : url('./img/02.png') no-repeat;
      background-size: 100% 100%;
      margin-bottom  : 10px;
      display        : flex;
      flex-direction : column;
      box-sizing     : border-box;
      font-size      : 0.2rem;
      margin-top     : 10px;
      position       : relative;
    }

    .btn1 {
      position: absolute;
      left    : 0;
      top     : -4px;
      z-index : 111;
    }

    .box3>div:first-child {
      flex: 0.55;
    }

    .box3>div:nth-child(2) {
      flex      : 0.8;
      color     : #296aff;
      display   : flex;
      margin-top: 25px;

    }

    .box3>div:nth-child(2)>div {
      flex           : 1;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }

    .box3>div:nth-child(2)>div:nth-child(1) {
      flex: 0.6;
    }

    .box3>div:nth-child(2)>div:nth-child(2) {
      flex: 1;
    }

    .box3>div:nth-child(2)>div:nth-child(3) {
      flex: 2;
    }

    .box3>div:nth-child(2)>div:nth-child(4) {
      flex: 1;
    }

    .box3>div:nth-child(2)>div:nth-child(6) {
      flex: 2;
    }

    .box3 .tab-content {
      flex      : 8;
      box-sizing: border-box;
      margin-top: 3px;
      display   : flex;
      width     : 100%;
    }

    .box3 .tab-content table {
      flex           : 1;
      border         : none;
      color          : white;
      display        : flex;
      flex-direction : column;
      width          : 100%;
      justify-content: flex-start;
    }

    .tab-content table tr {
      flex   : 1;
      display: flex;
      width  : 100%;
      display: flex;
    }

    .tab-content table tr td {
      flex           : 1;
      display        : flex;
      justify-content: center;
      align-items    : center;
    }

    .tab-content table tr td:nth-child(1) {
      flex: 0.6;
    }

    .tab-content table tr td:nth-child(2) {
      flex: 1;
    }

    .tab-content table tr td:nth-child(3) {
      flex         : 2;
      text-overflow: ellipsis;
      overflow     : hidden;
      white-space  : nowrap;
    }

    .tab-content table tr td:nth-child(4) {
      flex: 1;
    }

    .tab-content table tr td:nth-child(6) {
      flex         : 2;
      text-overflow: ellipsis;
      overflow     : hidden;
      white-space  : nowrap;
    }

  }

  .footer {
    display: flex;
    height : 25vh;

    .left {
      width          : 50%;
      background     : url('./img/03.png') no-repeat;
      background-size: 100% 100%;
      padding        : 0 10px;
      box-sizing     : border-box;
      display        : flex;

      .left-1 {
        flex      : 1;
        height    : 21vh;
        display   : inline-block;
        margin    : 0 5px;
        margin-top: 3.5vh;
        border: 1px solid skyblue;
        .tab-1{
          position: relative;
          .cell{
            display: block;
            position: absolute;
            overflow: hidden;
            top: 0;
            width: 100%;
            height: 195px;
            tr{
              width: 100%;
              display: flex;
              justify-content: space-around;
              td{
                text-align: center;
                color: aliceblue;
              }
              td:nth-child(1){flex:0.6}
              td:nth-child(2){flex: 1}
              td:nth-child(3){flex: 2}
              td:nth-child(4){flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
              td:nth-child(5){flex: 2}
            }
          }
        }
      }
    }

    .right {
      background     : url('./img/1111.png') no-repeat;
      background-size: 100% 100%;
      width          : 50%;
      padding-top    : 20px;
      box-sizing     : border-box;
    }
  }
}